/*
 * 地址选择
 */
'use strict';
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
    Image,
    PixelRatio,
    TouchableOpacity,
    TextInput,
} from 'react-native';


import Toast from 'antd-mobile/lib/toast';
import List from 'antd-mobile/lib/list';
import ActivityIndicator from 'antd-mobile/lib/activity-indicator';
import InputItem from 'antd-mobile/lib/input-item';

import NavTitle from '../component/NavTitle';

import { createForm } from 'rc-form';

import XFetch from '../XFetch';

class Forget extends Component {
    constructor(props) {
        super(props)

        this.state = {
            animating:false
        }
    }

    componentDidMount(){
    }

    _forgetPwd(){
        this.props.form.validateFields((error, value) => {
            if(!error){
                this.setState({
                    animating:true
                });

                let _body = {
                    ...value,
                    tel:value.tel.replace(/\s/g,'')
                }
                let formData = new FormData();

                Object.keys(_body).map(ele=>{
                    formData.append(ele, _body[ele]);
                });
                XFetch(`http://www.weiweigo.com/app/member.aspx?method=findPwd`,{
                    method:'POST',
                    body:formData
                }).then(data=>{
                    if(data){
                        Toast.success(data, 1);
                        this.setState({
                            animating:false
                        })
                        this.props.navigator.pop();
                    }
                });
            }
        })
    }

    _sendMSG(){
        XFetch(`http://www.weiweigo.com/app/member.aspx?method=getTelCode&tel=${this.props.form.getFieldValue('tel').replace(/\s/g,'')}`,{
            method:'GET',
        }).then(data=>{
            if(data){
                Toast.success(data, 1);
            }
        });
    }

    render() {
        const { getFieldProps } = this.props.form;
        return (
            <View style={styles.container}>
                <NavTitle
                    title='忘记密码'
                    leftButton = {true}
                    leftImg = {require('../imgs/left.png')}
                    leftText = {'返回'}
                    leftHander = {()=>{this.props.navigator.pop()}}
                    headColor = '#fbdc3a'
                />
                <View style={styles.content}>
                    <View style={[styles.btnInput,{paddingLeft:0,borderWidth:0,backgroundColor:'rgba(0,0,0,0)'}]}>
                        <InputItem
                            clear
                            style={[styles.telInput,{paddingLeft:0}]}
                            placeholder="手机号"
                            type="phone"
                            {...getFieldProps('tel',{
                                rules: [{required: true}],
                            })}
                            labelNumber={4}
                        >手机号</InputItem>
                        <TouchableOpacity style={styles.sendBtn} onPress={this._sendMSG.bind(this)}>
                            <Text>发送验证码</Text>
                        </TouchableOpacity>
                    </View>

                    <InputItem
                        clear
                        placeholder="验证码"
                        type='number'
                        {...getFieldProps('code',{
                            rules: [{required: true}],
                        })}
                        labelNumber={4}
                        maxLength = {6}
                    >验证码</InputItem>

                    <InputItem
                        clear
                        placeholder="新密码"
                        type='password'
                        {...getFieldProps('pwd',{
                            rules: [{required: true}],
                        })}
                        labelNumber={4}
                        maxLength = {10}
                    >新密码</InputItem>

                    <TouchableHighlight
                        style={styles.loginBtn}
                        onPress={this._forgetPwd.bind(this)}
                    >
                        <Text style={styles.loginText}>确定</Text>
                    </TouchableHighlight>

                </View>
                <ActivityIndicator
                    toast
                    text="数据加载中..."
                    animating={this.state.animating}
                />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EEEEEF',
        flex: 1,
    },
    itemStyle:{
        flexDirection:'row'
    },
    keys:{
        marginRight:10,
    },
    content:{
        padding:20,
    },
    textInput:{
        padding:5,
        paddingLeft:10,
        borderWidth:1/PixelRatio.get(),
        marginTop:20,
        borderRadius:4,
        borderColor:'#CCC'
    },
    telInput:{
        padding:5,
        paddingLeft:10,
        height:40,
        flex:1
    },
    btnInput:{
        borderWidth:1/PixelRatio.get(),
        marginTop:20,
        borderRadius:4,
        borderColor:'#CCC',
        flexDirection:'row'
    },
    sendBtn:{
        justifyContent:'center',
        alignItems:'center',
        borderBottomWidth:1/PixelRatio.get(),
        borderColor:'#CCC',
    },
    loginBtn:{
        padding:15,
        backgroundColor:'#FBDC3A',
        marginTop:20,
        borderRadius:3,
        justifyContent:'center',
        alignItems:'center'
    },
    loginText:{
        fontSize:16
    },
});

export default createForm()(Forget);
